<template>
  <div>
    
    <div ref="contnner" class="contnner">
      <div>
        <div class="abro">
          <div>热门城市</div>
          <ul>
              <li v-for="item in hotCities" @click="lohom(item.name)" :key="item.id">{{item.name}}</li>
          </ul>
        </div>

        <div class="abre">
          <div>字母排序</div>
          <ul>
              <li @click="myval(value)" v-for="(key,value) in cities" :key="value">{{value}}</li>
          </ul>
        </div>

        <div class="abrl" v-for="(key,value) in cities" :key="value" :ref="value">
          <div>{{value}}</div>
          <ul>
              <li v-for="item in key" :key="item.id"  @click="lohom(item.name)"> {{item.name}} </li>
          </ul>
        </div>
      </div>
    </div>
  </div>  
</template>


<script>
import { mapMutations } from 'vuex'
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      hotCities: [],
      cities: {},
      scroll: ''
    } 
  },
  components: { },

  methods: {
    myval(value) {
      this.scroll.scrollToElement(this.$refs[value][0]);
    },
    lohom(myname) {
      this.changCity(myname);
      this.$router.push('/');
    },
    ...mapMutations(['changCity'])
  },

  mounted() {
    this.$http.get("/api/city.json").then(res=> {
      const data  = res.data.data;

      this.hotCities = data.hotCities;
      this.cities = data.cities;
    })  
  },
  updated() {
    let contnner = this.$refs['contnner'];
    this.scroll =  new BScroll(contnner);
  }
}
</script>


<style lang="less" scoped>
 .contnner {
   position: absolute;
   top: 70px;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
  }

  .abro {
      line-height: 45px;
      >div {
          padding-left: 10px;
          font-size: 12px;
      }
      >ul {
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          >li {
              text-align: center;
              flex: calc(100% / 3);
              border-bottom: 1px solid #e0e0e0;
              position: relative;
              font-size: 14px;
              &:after {
                  content: "";
                  display: block;
                  position: absolute;
                  top: 0;
                  right: 0px;
                  background-color: #e0e0e0;
                  width: 1px;
                  height: 45px;
              }
          }
          >li:nth-child(3n+3) {
              &:after {
                  content: "";
                  width: 0px;
              }
          }
      }
  }

  .abre {
      line-height: 45px;
      >div {
          padding-left: 10px;
          font-size: 12px;
      }
      >ul {
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          >li {
              text-align: center;
              flex: calc(100% / 6);
              position: relative;
              font-size: 14px;
              flex-grow: 0;
              &:after {
                  content: "";
                  display: block;
                  position: absolute;
                  top: 0;
                  right: 0px;
                  width: 1px;
                  height: 45px;
              }
          }
      }
  }
  
  .abrl {
      line-height: 45px;
      >div {
          padding-left: 10px;
          font-size: 12px;
      }
      >ul {
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          >li {
              text-align: center;
              flex: calc(100% / 4);
              position: relative;
              font-size: 14px;
              border-bottom: 1px solid #e0e0e0;
              flex-grow: 0;
              &:after {
                  content: "";
                  display: block;
                  position: absolute;
                  top: 0;
                  right: 0px;
                  background-color: #e0e0e0;
                  width: 1px;
                  height: 45px;
              }
          }
      }
  }
</style>
